<template>
  <div>
    <dialog-subtitle>
      完成电子邮箱绑定，可通过以验证的邮箱找回密码，为了您的帐号资讯与资金安全，请尽快完成电子邮箱绑定。
    </dialog-subtitle>
    <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
             @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
             label-position="top"
             v-if="!user.email"
    >
      <el-form-item class="main-container-main__item" prop="email" ref="email" label="电子邮箱：" :error="codeOps.codeError">
        <el-input class="main-container-main__input" v-model="form.email" placeholder="请输入电子邮箱" auto-complete="off">
          <template slot="prepend">
            <svg-icon icon-class="envelope"></svg-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="main-container-main__item" prop="code" label="验证码：" :error="formError">
        <el-input class="main-container-main__input" v-model="form.code" placeholder="请输入验证码" auto-complete="off">
          <template slot="prepend">
            <svg-icon icon-class="login-security"></svg-icon>
          </template>
          <template slot="append">
            <el-button @click="sendCode({formItem: 'email'})"
                       type="dark"
                       shadow
                       :disabled="sendingCode"
                       size="medium">
              {{codeBtnText}}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item no-spacing>
        <el-button
          :block="true"
          type="primary"
          native-type="submit"
          :loading="loading"
        >确定</el-button>
      </el-form-item>
    </el-form>
      <!--<el-form v-else>-->
        <!--<el-form-item label="电子邮箱：">-->
          <!--<el-input placeholder="请输入电子邮箱" v-model="user.email" :disabled="true"></el-input>-->
          <!--<el-tip>-->
            <!--若要修改电子邮箱，请联系客服-->
          <!--</el-tip>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
  </div>
</template>

<script>
  import {form, getCode} from '@/build';
  import {bindUserEmail as saveApi, getEmailValidateCode as codeApi} from "@/services/api/user";

  export default {
    name: "safety-email-bind",

    mixins:[getCode,form],

    inject: ['setDialogHeader'],

    data(){
      return {
        editVisible: false,
        labelWidth: '120px',
        form: {
          // userId: this.user.id
          email: undefined,
          code: undefined,
          type: consts.CODE_EMAIL_BIND,
        },
        codeApi,
        formError: '',
        rules: {
          email: [
            {required:true,message:'电子邮箱为必填项！'},
            {type:'email',message:'电子邮箱格式不正确！'}
          ],
          code: {
            required: true, message:'验证码为必填项！'
          }
        }
      };
    },

    computed: {
      ...mapState({
        user: state => state.user,
      }),
    },

    created() {
      this.setDialogHeader('电子邮箱验证');
    },

    mounted(){
      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: (data) => {

          this.formError = '';
          return data;
        },
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$store.dispatch(types.GET_SECURITY);
          this.$emit('on-success');
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
        }
      });
    }
  };
</script>

<style lang="scss" scoped>

</style>
